<template>
  <div>
    薪⽔：<input type="number" v-model="salary" /> <br />
    <button @click="addsum">薪⽔+1000</button>
  </div>
</template>
<!-- vue3写法 -->
<script lang="ts" setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
// 数据
let salary = ref(0)
// ⽅法
function addsum() {
  salary.value += 1000
}
console.log('setup')
// ⽣命周期钩⼦
onBeforeMount(() => {
  console.log('挂载之前')
})
onMounted(() => {
  console.log('挂载完毕')
})
onBeforeUpdate(() => {
  console.log('更新之前')
})
onUpdated(() => {
  console.log('更新完毕')
})
onBeforeUnmount(() => {
  console.log('卸载之前')
})
onUnmounted(() => {
  console.log('卸载完毕')
})
</script>
